import QtQuick 2.12
import QtQuick.Window 2.12
/*
QML Canvas 是一个强大的图形绘制工具，可用于设计自定义控件，游戏开发中绘制界面与动画，处理图像的裁剪旋转缩放等诸多用途。
在Canvas元素上绘制图形，通常发生在onPaint信号处理函数中，在这个函数里，可以通过获取绘图上下文getContext("2d")，
并使用它来绘制图形。
基础图形绘制通常发生在beginPath与stroke中间
*/
Window {    
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    //添加Canvas元素
    Canvas {
        id: myCanvas
        anchors.fill: parent  //填充顶级窗口
        onPaint: { //在Canvas元素上绘制图形
            var ctx = getContext("2d")

            ctx.beginPath()
            ctx.rect(50, 50, 100, 100) //在坐标（50,50）处绘制一个宽度100 高度100的矩形
            ctx.stroke()

            ctx.beginPath()
            ctx.arc(200, 100, 50, 0*Math.PI, 1*Math.PI) //以坐标（200,100）为圆心，绘制半径50，弧度从0到Π的弧线
            ctx.stroke()

            ctx.beginPath()
            ctx.moveTo(250, 100)   //从坐标(250,100)到坐标(420,100)绘制一条直线
            ctx.lineTo(420, 100)
            ctx.stroke()

            ctx.fillStyle = "red"
            ctx.font = "italic 30px Arial"
            ctx.fillText("Hello world", 250, 90)   //在坐标(250,90)处绘制文本Hello World

            ctx.beginPath()
            ctx.ellipse(420, 50, 200, 100) //在坐标（420,50)处绘制宽200高100的椭圆
            ctx.stroke()

            ctx.fillStyle = "red"
            ctx.fillRect(50, 200, 100, 100) //在坐标（50，200)处，绘制宽100高100，填充红色的矩形

            ctx.beginPath()
            //将坐标（150，250）设置为曲线起点，坐标(250,150)设置为二次贝塞尔曲线控制点，坐标（250，250）设置为曲线终点，绘制曲线
            ctx.moveTo(150, 250)
            ctx.quadraticCurveTo(250, 150, 250, 250)
            ctx.stroke()

            //绘制自定义图形-箭头
            ctx.beginPath()
            ctx.moveTo(450, 245)
            ctx.lineTo(500, 245)
            ctx.lineTo(500, 225)
            ctx.lineTo(525, 250)
            ctx.lineTo(500, 275)
            ctx.lineTo(500, 255)
            ctx.lineTo(450, 255)
            ctx.closePath()
            ctx.fillStyle = "yellow"
            ctx.fill()
            ctx.strokeStyle = "black"
            ctx.linewidth = 2
            ctx.stroke()

        }
    }
}
